<template>
    <div class="shareList">
      <nav-bar path="/home/find" title="面经分享"></nav-bar>
      <div class="content">
        <van-search
          class="search"
          v-model="inputValue"
          placeholder="请输入关键字"
          shape="round"
          @search="onSearch"
          @clear="onClear"
        ></van-search>
        <div v-if="showList">
          <van-list
            v-if="bol"
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <share-item v-for="(item,index) in list" :key="index" :item="item"></share-item>
          </van-list>
        </div>
        <div v-else>
          <div class="all">
            <h3 class="mg-bom">大家都在搜</h3>
            <van-tag
              color="#f7f4f5"
              text-color="#545671"
              class="txt"
              v-for="(item,index) in hotList"
              :key="index"
            @click="search(item)">{{item}}</van-tag>
          </div>
          <div class="his-search">
            <div class="title mg-bom">
              <h3>历史搜索</h3>
              <span class="clear" @click="clear">清空</span>
            </div>
            <van-tag
              color="#f7f4f5"
              text-color="#545671"
              class="txt"
            v-for="(item,index) in localList"
            :key="index"
            @click="search(item)">{{item}}</van-tag>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
import navBar from '@/components/navBar'
import { articlesShare, articlesShareTopSearch } from '@/api/find'
import { setLocal, getLocal } from '@/utils/local'
import shareItem from './shareItem'
export default {
  name: 'shareList',
  components: {
    navBar,
    shareItem
  },
  data () {
    return {
      showList: true,
      bol: true,
      inputValue: '',
      list: [],
      loading: false,
      finished: false,
      currentPage: 1, // 当前页
      pageSize: 3, // 页容量
      hotList: [], // 热门搜索
      localList: JSON.parse(getLocal('history')) || [] // 历史搜索
    }
  },
  async created () {

  },
  methods: {
    onSearch () {
      this.list = []
      this.finished = false
      this.loading = false
      this.currentPage = 1
      this.bol = false
      this.$nextTick(() => {
        this.bol = true
      })
      this.showList = true
      if (this.inputValue !== '') {
        this.localList.unshift(this.inputValue)
      }
      // 去重
      this.localList = [...new Set(this.localList)]
      // 只保留前五位数据
      this.localList.splice(5)
      // 保存到本地
      setLocal('history', JSON.stringify(this.localList))
    },
    async onClear () {
      this.showList = false
      if (this.hotList.length === 0) {
        const res = await articlesShareTopSearch()
        console.log(res)
        this.hotList = res.data.data
      }
    },
    async onLoad () {
      try {
        const res = await articlesShare({ start: (this.currentPage - 1) * this.pageSize, limit: this.pageSize, q: this.inputValue })
        // this.list = res.data.data.list
        if (this.inputValue.trim() !== '') {
          res.data.data.list.forEach(item => {
            const _arr = item.title.split(this.inputValue)
            item.title = _arr.join(`<span style="color: red">${this.inputValue}</span>`)
          })
        }
        this.list.push(...res.data.data.list)
        this.loading = false
        this.currentPage++
        if (this.list.length >= res.data.data.total) {
          this.finished = true
        }
      } catch {
      }
    },
    search (keyword) {
      this.inputValue = keyword
      this.onSearch()
    },
    clear () {
      this.localList = []
      setLocal('history', JSON.stringify(this.localList))
    }
  }
}
</script>

<style lang="less" scoped>
  .shareList {
    .content {
      padding: 0 @p15;
      .search {
      }
      .mg-bom {
        margin-bottom: 18px;
      }
      h3 {
        font-size: 18px;
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 500;
        text-align: left;
        color: #222222;
        line-height: 25px;
        letter-spacing: 0px;
      }
      .txt {
        padding: 8px 10px;
        border-radius: 8px;
        margin-right: 10px;
        margin-bottom: 10px;
      }
      .all {
        margin-bottom: 38px;
        margin-top: 21px;
      }
      .his-search {
        .title {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .clear {
            font-size: 14px;
            font-family: PingFangSC, PingFangSC-Regular;
            font-weight: 400;
            text-align: right;
            color: #545671;
            line-height: 17px;
            letter-spacing: 0px;
          }
        }
      }
    }
  }
</style>
